<template>
  <div id="search">
    <el-form :inline="true" :model="name" class="demo-form-inline">
      <el-form-item label="用户姓名">
        <el-input v-model="name" placeholder="请输入用户姓名"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="selectByName">查询</el-button>
        <el-button type="primary" @click="addUser">新增</el-button>
      </el-form-item>
    </el-form>
    <edit :dialog-visible="dialogVisible"/>
  </div>
</template>
<script>
  import edit from './edit'
  export default {
    name: 'search',
    components:{
      edit
    },
    props: {
      //是否编辑
      dialogVisible: {
        type:Boolean,
        default:false
      },
      name: {
        type: SVGAnimatedInteger,
        default: ''
      },
      //当前页码
      current: {
        type: SVGAnimatedInteger,
        default: 1
      },
      //每页显示条数
      pageSize: {
        type: SVGAnimatedInteger,
        default: 2
      },
      //总记录数
      total: {
        type: SVGAnimatedInteger
      }
    },
    methods: {
      query (current, pageSize, name) {
        var $this = this
        $this.axios.get('http://localhost:8082/query',
          {
            params: {
              current: current,
              name: name,
              pageSize: pageSize
            }
          })
          .then(function (response) {
            $this.users = response.data.records
            $this.total = response.data.total
          })
      },
      //点击新增
      addUser () {
        this.dialogVisible = true;
        alert(2222)
      },
      //模糊查询
      selectByName () {
        var $this = this;
        this.$emit('newName', $this.name);
        $this.query(this.current, this.pageSize, this.name);
      }
    }
  }
</script>


